<template>
  <Modal :draggable="!$config.mask"
         :mask="$config.mask"
         :mask-closable="!$config.mask"
         :value="value"
         @on-ok="save"
         @on-visible-change="visibleChange"
         width="800"
  >
    <p slot="header">
      {{ title }}
      <span>（选择了 {{ selectedNodes.length }} 个权限）</span>
    </p>
    <Card dis-hover class="pandx">
      <tree-select-common ref="treeSelect" property="name" v-model="selectedNodes" :data="permissions"
                          :show-checkbox="true" :check-directly="true" :tag-show="false"
                          tag-color="success" :indeterminate="true"></tree-select-common>
    </Card>
    <div v-if="modalData.user" style="margin-top:10px;">
      <Alert type="warning" style="margin-bottom:0;">如果您正在设置自己的权限，则可能需要刷新页面（F5），以便权限设置生效！</Alert>
    </div>
    <div slot="footer">
      <Button icon="md-close" @click="cancel">取消</Button>
      <Button icon="md-checkmark" type="primary" @click="save">确定</Button>
    </div>
  </Modal>
</template>

<script lang="ts">
import {Component, Vue, Prop, Watch, Emit} from 'vue-property-decorator';
import AbpBase from '@/lib/abpbase';
import TreeSelectCommon from '@/components/select/tree-select-common.vue';

@Component({
  components: {TreeSelectCommon},
})
export default class PermissionModal extends AbpBase {
  name: string = 'PermissionModal';

  @Prop({type: Boolean, default: false}) value: boolean;
  @Prop({
    type: Object, default: () => {
    }
  }) modalData: any;

  selectedNodes: any[] = [];

  get permissions() {
    return this.getTreeData(0, null);
  }

  get title() {
    if (this.modalData.user) {
      return `设置特殊权限：${this.modalData.user.userName} `;
    }
    return '选择权限';
  }


  save() {
    this.$emit('on-save', this.selectedNodes, this.modalData.user);
    this.$emit('input', false);
  }

  visibleChange(value: boolean) {
    if (!value) {
      this.reset();
      this.$emit('input', value);
    } else {
      (this.$refs.treeSelect as any).selectedNodes = [];
      (this.$refs.treeSelect as any).setSelectedNode(this.permissions, this.modalData.selectedNodes, 'name');
    }
  }

  cancel() {
    this.$emit('input', false);
  }


  reset() {
    this.selectedNodes = [];
  }

  getTreeData(level: number, parentName: string) {
    let data: any[] = [];
    const p = this.$store.state.permission.permissions;
    p.forEach((item) => {
      if (item.level === level) {
        if (item.parentName === parentName) {
          let node: any = {};
          node.title = item.displayName;
          node.expand = true;
          node.name = item.name;
          node.extra = item;
          node.children = this.getTreeData(level + 1, item.name);
          data.push(node);
        }
      }
    });
    return data;
  }



}
</script>

<style lang="less" scoped>
.pandx::v-deep {
  .ivu-card-body {
    height: 600px;
    overflow-y: auto;
  }

  .ivu-card-body::-webkit-scrollbar {
    width: 4px;
    background-color: #fff;
  }

  .ivu-card-body::-webkit-scrollbar-thumb {
    border-radius: 2px;
    -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, .3);
    background-color: #e8eaec;
  }

  .ivu-card-body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, .3);
    border-radius: 2px;
    background-color: #fff;
  }
}
</style>
